<template>
  <el-dialog v-model="dialogVisible" title="选择存货编码" width="80%">
    <el-form>
      <ContentWrap>
        <!-- 搜索工作栏 style="height:auto;align-items:stretch;" -->
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="存货编码" prop="code">
            <el-input
              v-model="queryParams.inventoryCode" placeholder="请输入存货编码" clearable
              @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item label="存货名称" prop="name">
            <el-input
              v-model="queryParams.inventoryName" placeholder="请输入存货名称" clearable
              @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item label="规格型号" prop="specModel">
            <el-input
              v-model="queryParams.inventorySpecModel" placeholder="请输入规格型号" clearable
              @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item label="品牌" prop="brand">
            <el-input
              v-model="queryParams.brand" placeholder="请输入品牌" clearable
              @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item label="批号" prop="batchCode">
            <el-input
              v-model="queryParams.batchCode" placeholder="请输入批号" clearable
              @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
              start-placeholder="开始日期" end-placeholder="结束日期"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-220px"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>
      <!-- 列表 -->
      <ContentWrap>
        <el-table
          v-loading="loading"
          :data="list"
          :stripe="true"
          :show-overflow-tooltip="true"
          style="height: calc(80vh - 50px - 50px - 35px - 25px)"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="存货编码" align="center" prop="inventoryCode" />
          <el-table-column label="存货名称" align="center" prop="inventoryName" />
          <el-table-column label="规格型号" align="center" prop="inventorySpecModel" />
          <el-table-column label="计量单位" align="center" prop="inventoryUnitName" />
          <el-table-column label="数量" align="center" prop="qty" />
          <el-table-column label="品牌" align="center" prop="inventoryBrand" />
          <el-table-column label="仓库" align="center" prop="warehouseName" />
          <el-table-column label="货位" align="center" prop="locationName" />
          <el-table-column label="批号" align="center" prop="batchCode" />

          
        </el-table>
      </ContentWrap>
      <div class="footer">
      <el-button type="primary" @click="handleSubmit" >提交</el-button>
      </div>

    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps } from 'vue';
import { StockApi, StockLogVO } from '@/api/wms/stock';
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict';
import { dateFormatter } from '@/utils/formatTime';

const loading = ref(true); // 列表的加载中
const list = ref<StockLogVO[]>([]); // 列表的数据
const total = ref(0); // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  inventoryCode: undefined,
  inventoryName: undefined,
  inventorySpecModel: undefined,
  classifyId: undefined,
  isBatch: undefined,
  brand: undefined,
  createTime: [],
  batchCode: undefined
});

const params = reactive({
  warehouseId: undefined,
  locationId:undefined
 
});
const queryFormRef = ref(); // 搜索的表单

interface Props {
  initialData?: { inventoryCode: any; };
}

const props = defineProps<{
  warehouseId: undefined // 主表ID（主表的关联字段）
  locationId: undefined
}>()
const dialogVisible = ref(false);
const formData = ref({
});

const emit = defineEmits(['success']);

const open = () => {
  dialogVisible.value = true;
  getList();
};

const handleSubmit = () => {
  // 表单提交逻辑
  // 假设表单验证通过
  const isFormValid = true;

  if (isFormValid) {
    // 触发 success 事件，并传递表单数据
    emit('success', formData.value);
    formData.value.inventoryCode = [];
    dialogVisible.value = false; // 关闭弹窗
  }
};

const handleSelectionChange = (selection: StockLogVO[]) => {
  // 获取选中的行的 ID
  const selectedIds = selection.map(row => row.id);
  console.log('Selected IDs:', selectedIds);
  // 你可以在这里处理选中的行，例如存储到 formData 中
  formData.value.inventoryCode = selectedIds;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields();
  handleQuery();
};

/** 查询列表 */
const getList = async () => {
  loading.value = true;
  try {
    queryParams.warehouseId=props.warehouseId;
    const data = await StockApi.findUseListByParam(queryParams);
    list.value = data; // 
    console.log('Fetched data:', list.value); // 添加调试信息
  } finally {
    loading.value = false;
  }
};

// 暴露 open 方法给父组件
defineExpose({ open });
</script>

<style scoped>
.footer {
  margin-top: 20px;
  text-align: right;
}
</style>